<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.Random"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>賀卡活動</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon" />
<!-- index_cover -->
<link href="light/css/index_style.css" rel="stylesheet" />
<link href="light/css/bg.css" rel="stylesheet" />
<!-- reset.css -->
<link rel="stylesheet" href="light/css/reset.css" media="screen">
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="light/css/skeleton.css" media="screen">
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="light/css/style.css" media="screen">
<link rel="stylesheet" href="light/css/cardHealth.css" media="screen">
<link rel="stylesheet" href="light/css/cardSpecial.css" media="screen">
<link rel="stylesheet" href="light/css/hint.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- alert -->
<link rel="stylesheet" href="light/css/jquery.growl.css">
<!-- lantern -->
<link rel="stylesheet" href="light/css/lantern.css">
<!-- sweet-alert -->
<link rel="stylesheet" href="light/css/sweet-alert.css">
<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
<!-- validate -->
<link href="css/jquery.validate.css" rel="stylesheet">
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<script src="js/modernizr.custom.js"></script>
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta property="og:title" content="To:${light.receiver}">
<meta name="description" content="${activity.shareContent}">
<link rel="image_src" href="http://www.proactive.tw/${shareImage}" />
<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body class="lantern_nav_chg">
	<div class="list-screen clearfix">
		<div class="navfull">
			<div class="container">
				<div class="grid_12">
					<div class="logo">
						<a href="index">Proactive</a>
					</div>
					<ul class="topnav">
						<c:forEach items="${menuList}" var="menu">
							<li><a href="${menu.url}" class="${menu.classString1}">
									${menu.icon} ${menu.name} </a></li>
						</c:forEach>
					</ul>
					<ul class="login">
						<%
							if (session.getAttribute("loginMember") != null) {
						%>
						<li><a href="aboutme?id=${loginMember.memberNO}" class="loginImg"> <img src="${loginMember.photoPath}"></a>
							<ul class="loginDropdown hide">
								<li><a href="aboutme?id=${loginMember.memberNO}">關於我</a></li>
								<li><a href="memberCourse?id=${loginMember.memberNO}">我創作</a></li>
								<li><a href="collectCourse?id=${loginMember.memberNO}">我收藏</a></li>
								<li><a href="memberCard?id=${loginMember.memberNO}">耶誕卡片</a></li>
								<li><a href="logout">登出</a></li>
							</ul>
						</li>
						<%
							} else {
						%>
						<li><a href="register">註冊</a></li>
						<li><a href="login">登入</a></li>
						<%
							}
						%>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- 背景 -->
	<div class="stars"></div>
		<img class="cloud2" src="light/img/cloud.png">
		<img class="cloud3" src="light/img/cloud3.png">

		<div class="icons">
			<span class="hint--top" data-hint="了解活動">
				<div class="icon icon1 hvr-float-shadow">
					<a href="#" id="process">
						<img class="introduce" src="light/img/introduce.png">
					</a>
				</div><!-- 了解活動 -->
			</span>
			<span class="hint--top" data-hint="開始製作天燈">
				<div class="icon icon2 hvr-float-shadow">
					<a href="#" id="after" name="after">
						<img class="making" src="light/img/making.png">
					</a>
				</div><!-- 開始製作天燈 -->
			</span>
			<span class="hint--top" data-hint="點亮自己的天燈">
				<%
					if (session.getAttribute("loginMember") != null) {
				%>
				<div class="icon icon3 hvr-float-shadow">
					<a href="memberLight?id=${loginMember.memberNO}">
						<img class="lightup" src="light/img/lightup.png"/>
					</a>
				</div><!-- 點亮自己的天燈 -->
				<%
					} else {
				%>
				<div class="icon icon3 hvr-float-shadow"><a href="#" data-reveal-id="login"><img class="lightup" src="light/img/lightup.png"></a></div><!-- 點亮自己的天燈 -->
				<%
					}
				%>
			</span>
			<span class="hint--top" data-hint="返回活動主頁">
				<div class="icon icon4 hvr-float-shadow">
					<a href="#" id="before">
						<img class="introduce" src="light/img/iconmonstr-home-4-icon-256.png">
					</a>
				</div><!-- 返回活動主頁 -->
			</span>
		</div>

	<!-- 天燈控制 -->
	<div class="container_lantern">
		<div class="before">
			<%
				Random random = new Random();
			%>
			<div class="change" id="change1">				
				<c:forEach items="${lightTenList}" var="light">
					<%
						int width = random.nextInt(50) + 100;
					%>
					<figure class="${light.floatPath}" style="left: <%=Math.random() * 90%>%; width: <%=width %>px; height:<%=width+20 %>px;"  id="${light.id}">
						<img class="img" src="${light.imagePath}" style="width: 100%; height: 100%;" id="${light.id}">
					</figure>
				</c:forEach>
			</div>
			<div class="change" id="change2"></div>	
		</div>
		<!--六種製作天燈 -->
		<div class="after" style="margin: 0 auto">
			<c:forEach items="${lightTemplateList}" var="lightTemplate">
				<img class="lantern_example" src="${lightTemplate.imagePath}"
					id="${lightTemplate.id}">
			</c:forEach>
		</div>
	</div>
	<!--顯示卡片 -->
	<div id="view"></div>
	
	<!-- 活動流程圖 -->
	<div id="image" style="display: none;">
		<span class="button b-close"><span>X</span></span>
		<img  style="width: 60%;" src="light/img/process.jpg">
	</div>
		
	<!-- 卡片敘述 -->
	<div id="newLove" style="display: none;">
		<div class="lovecard grid_6">
			<div class="card_container">
				<h3 class="card_span card_spantitle">
					<span class="">愛情卡</span>
				</h3>
				<p>
				<h4>
					<p>
	當我佇立在窗前　你愈走愈遠<br>
	我的每一次心跳　你是否聽見<br>
	當我徘徊在深夜　你在我心田<br>
	你的每一句誓言　迴盪在耳邊<br>

	天天想你　天天問自己<br>
	到什麼時候才能告訴你<br>
	天天想你　天天守住一顆心<br>
	把我最好的愛留給你<br>
	<span style="margin-left:350px">天天想你  作詞: 陳樂融</span><br><br>


	<span style="font-weight:bold">不知道如何表達你的情意嗎?快製作一張卡片把最好的愛留給那個他吧!
	</span>
	</p>
				</h4>
				</p><%if(session.getAttribute("loginMember") != null){ %>
				<button class="startlove_btn clickCard" id="1" >開始製作</button>
				<% }else{ %>
				<a href="#" class="startlove_btn clickLogin" data-reveal-id="login" id="1" style="color:white;">開始製作</a>
				<% } %>
			</div>
			<div class="loveicondiv">
				<div class="loveicon goat">
					<img src="light/img/love5.png" alt="">
				</div>
				<div class="loveicon heart">
					<i class="icn_red wow pulse" data-wow-iteration="infinite"
						data-wow-duration="500ms"></i>
				</div>
				<div class="loveicon newyear">
					<img src="light/img/love6.png" alt="">
				</div>
			</div>
		</div>
	</div>
	<div id="newBusiness" style="display: none;">
		<div class="businesscard grid_6">
			<div class="card_container">
				<h3 class="card_span card_spantitle">
					<span class="">事業卡</span>
				</h3>
				<h4>
					<p>
					想像你的孫子 孫女 充滿光的瞳孔<br>
					正等著你開口 等著你說 你最光輝 的一次傳說<br>
					
					每個平凡的自我 都曾幻想過<br>
					以你為名的小說 會是枯燥 或是雋永<br><br>
					<span style="margin-left:200px">有些事現在不做 一輩子都不會做了 作詞:阿信</span><br><br>

					世上職業有千百種，每種行業不分貴賤，每個人都是這個社會中獨一無二的螺絲釘，寫下一張卡片，為在這個社會裡努力轉動的他加油和祝福吧！
				</p>
				</h4><%if(session.getAttribute("loginMember") != null){ %>
				<button class="startbusiness_btn clickCard" id="2">開始製作</button>
				<% }else{ %>
				<a href="#" class="startbusiness_btn clickLogin" data-reveal-id="login" id="2" style="color:white;">開始製作</a>
				<% } %>
			</div>
			<div class="allballdiv">
				<div class="balldiv">
					<div class="ball businessball1">
						<img src="light/img/business1.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
				<div class="balldiv">
					<div class="ball businessball2">
						<img src="light/img/business2.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
				<div class="balldiv">
					<div class="ball businessball3">
						<img src="light/img/business3.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
				<div class="balldiv">
					<div class="ball businessball4">
						<img src="light/img/business4.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
				<div class="balldiv">
					<div class="ball businessball5">
						<img src="light/img/business6.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
				<div class="balldiv">
					<div class="ball businessball6">
						<img src="light/img/business5.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
				<div class="balldiv">
					<div class="ball businessball7">
						<img src="light/img/business7.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
				<div class="balldiv">
					<div class="ball businessball8">
						<img src="light/img/business8.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
				<div class="balldiv">
					<div class="ball  businessball9">
						<img src="light/img/business9.1.png" alt="">
					</div>
					<span class="shadow"></span>
				</div>
			</div>
		</div>
	</div>
	<div id="newHealth" style="display: none;">
		<div class="healthcard grid_6 ">
			<div class="card_container">
				<h3 class="card_span card_spantitle">
					<span class="">健康卡</span>
				</h3>
				<p>
				<h4>
				<p>
					我聽不見你的叫囂　也看不見你的打擾<br>
					或許麥田是個讓你耕種微笑的地方<br>
					它讓我學會用微笑當作人生的肥料<br>
					<span style="margin-left:350px">麥田捕手 作詞: 白安</span><br><br>

					五光十色的城市，光鮮亮麗的打扮，為了偽裝的面具，現在人們的快速生活步調，被一層又一層的巨大壓力壟罩著，迷失在金錢娛樂之中，卻忘了健康才是最基本的存在，微笑是健康最有效的良藥，寫下一張卡片傳遞你的微笑給那個他，祝福他像浩克一樣強壯吧！
				</p>
				</h4>
				</p><%if(session.getAttribute("loginMember") != null){ %>
				<button class="starthealth_btn clickCard" id="3">開始製作</button>
				<% }else{ %>
				<a href="#" class="starthealth_btn clickLogin" data-reveal-id="login" id="3" style="color:white;">開始製作</a>
				<% } %>
			</div>
			<div class="healthicondiv">
				<div class="hulk">
					<div class="head">
						<div class="mouth"></div>
					</div>
					<div class="right-arm"></div>
					<div class="fist"></div>
					<div class="left-arm"></div>
					<div class="body"></div>
					<div class="right-leg"></div>
					<div class="left-leg"></div>
				</div>
			</div>
		</div>
	</div>
	<div id="newAcademic" style="display: none;">
		<div class="academiccard grid_6 ">
			<div class="card_container">
				<h3 class="card_span card_spantitle">
					<span class="">學業卡</span>
				</h3>
				<p>
				<h4>
				<p>
					屋頂的天空是我們的 放學後夕陽也都會是我們的<br>
					不會再讓步更多了<br>
					唱一首屬於我們的歌 讓我們的傷都慢慢慢的癒合<br>
					明天我又會是全新的<br>
					<span style="margin-left:350px">笑忘歌  作詞：阿信</span><br><br>

					學習的過程中總有許多大大小小的考試測驗，或許曾有一兩次考差，但重要的是我們曾經努力過，把你的正能量傳送出去，讓彼此一起努力，祝福他學業順利步步高升吧！
				</p>
				</h4>
				</p><%if(session.getAttribute("loginMember") != null){ %>
				<button class="startacademic_btn clickCard" id="4">開始製作</button>
				<% }else{ %>
				<a href="#" class="startacademic_btn clickLogin" data-reveal-id="login" id="4" style="color:white;">開始製作</a>
				<% } %>
			</div>
			<div class="academicicondiv">
				<div class="test-tube">
					<object data="http://imgh.us/tube.svg" type="image/svg+xml"></object>
				</div>
			</div>
		</div>
	</div>
	<div id="newPeace" style="display: none;">
		<div class="peacecard grid_6 ">
			<div class="card_container">
				<h3 class="card_span card_spantitle">
					<span class="">平安卡</span>
				</h3>
				<p>
				<h4>
				<p>
					你轉身紅著眼睛　要我一路上小心<br>
					從那細微變化的表情　你的痛不用再證明<br>
					你一路上要我小心　淚卻不知怎麼停<br>

					<span style="margin-left:300px">一路上小心  作詞：方文山</span><br><br>

					從電話那頭過來的，是一句簡單的問候：近來安好，天氣變化大，要多多保重自己的身體哦！<br>
					許多人總認為大富大貴才是幸福，其實，只要平安，就是最大的幸福。<br>
					寫下你的祝福吧！乘著紙飛機，把幸福傳出去！
				</p>
				</h4>
				</p><%if(session.getAttribute("loginMember") != null){ %>
				<button class="startpeace_btn clickCard" id="5" style="position: relative; z-index: 1000">開始製作</button>
				<% }else{ %>
				<a href="#" class="startpeace_btn clickLogin"  data-reveal-id="login" id="5" style="color:white;position: relative; z-index: 1000">開始製作</a>
				<% } %>
			</div>
			<div class="frame">
				<div class="plane-container">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
						width="1131.53px" height="120px" viewBox="0 0 1131.53 120"
						enable-background="new 0 0 1131.53 120" xml:space="preserve"
						class="plane">
				<polygon fill="#D8D8D8"
							points="72.008,0 274.113,140.173 274.113,301.804 390.796,221.102 601.682,367.302 1131.53,0.223  " />
				<polygon fill="#C4C4C3"
							points="1131.53,0.223 274.113,140.173 274.113,301.804 390.796,221.102   " />
				</svg>

				</div>
			</div>
			<div class="clouds">
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					width="762px" height="331px" viewBox="0 0 762 331"
					enable-background="new 0 0 762 331" xml:space="preserve"
					class="cloud big front slowest">
			<path fill="#FFFFFF"
						d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					width="762px" height="331px" viewBox="0 0 762 331"
					enable-background="new 0 0 762 331" xml:space="preserve"
					class="cloud distant smaller">
			<path fill="#FFFFFF"
						d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>

				<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					width="762px" height="331px" viewBox="0 0 762 331"
					enable-background="new 0 0 762 331" xml:space="preserve"
					class="cloud small slow">
			<path fill="#FFFFFF"
						d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>

				<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					width="762px" height="331px" viewBox="0 0 762 331"
					enable-background="new 0 0 762 331" xml:space="preserve"
					class="cloud distant super-slow massive">
			<path fill="#FFFFFF"
						d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>

				<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					width="762px" height="331px" viewBox="0 0 762 331"
					enable-background="new 0 0 762 331" xml:space="preserve"
					class="cloud slower">
			<path fill="#FFFFFF"
						d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
			c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
			C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
			S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z" />
			</svg>

			</div>

		</div>
	</div>
	<div id="newSpecial" style="display: none;">
		<div class="specialcard">
			<div class="card_container_special">
				<h3 class="card_span_special card_spantitle_special">
					<span class="">特別卡</span>
				</h3>
				<p>
				<h4>
					曾經受過了傷　自己築起了牆　但風指引方向　駛出這片汪洋<br>
					是誰給予力量　內心不再徬徨　你就是那太陽　灰暗變得明朗<br><br>
					
					
				總有那麼一個人，在你遇到挫折時，陪伴在身邊，給予幫助。<br>
				因為你，在他(她)眼中就是那麼特別。<br>
				簡單誠摯的一個祝福，獻給對你而言，特別的人！
				</h4>
				</p><%if(session.getAttribute("loginMember") != null){ %>
				<button class="specialriddle_btn clickCard" id="6">開始製作</button>
				<% }else{ %>
				<a href="#" class="specialriddle_btn clickLogin" data-reveal-id="login" id="6" style="color:white;">開始製作</a>
				<% } %>
				<div class="boat">
				<img src="light/img/boat.png">
			</div>
			</div>
			
			</div>
		</div>



	<!-- 新增卡片 -->
	<div id="addCard" style="display: none;">
		<form id="sendForm" action="addLight" method="post">
			<input type="hidden" id="tid" name="tid">
			<div class="grid_6 " id="part1">
				<div class="card_container">
					<h3 class="card_span card_spantitle">
						TO:<input type="text" class="card_send" placeholder="收件者姓名 or 綽號"
							name="receiver">
					</h3>
					<h4>
						<textarea class="card_textarea" id="TextArea" placeholder="請輸入卡片內容"
							name="content" onkeyup="words_deal()"></textarea>
					</h4>
					<h3 class="card_span">
						FROM:<input type="text" class="card_receive"
							placeholder="寄件者姓名 or 綽號" name="sender">
					</h3>
					<div class="check">
						<div class="slideThree">
							<input type="checkbox" value="1" id="slideThree" name="status" style="visibility: hidden;" onclick="show(this,'s2')" /> <label
								for="slideThree"></label>
						</div>
						<h3 class="checklabel">是否要加燈謎?</h3>
					</div>
					<div id="s2" style="display: none">
						<h3 class="card_span">
							燈謎:<input type="text" class="card_receive" placeholder="請輸入題目"
								name="question" maxlength="50">
						</h3>
						<h3 class="card_span">
							謎底:<input type="text" class="card_receive" placeholder="請輸入解答"
								name="answer" maxlength="50">
						</h3>
					</div>
					<input type="submit" id="part2" value="確定!我要送出天燈">
				</div>
			</div>
		</form>
	</div>
	<!-- 分享頁面 -->
	<div id="sharePage" style="display: none;">
		<div class="container">
			<div class="grid_6">
				<div class="share">
					<h3>把祝福分享給朋友吧!</h3>
					<div class="pic">
						<a href="https://mail.google.com/mail/u/0/?tab=wm#inbox?compose=new" target="_blank"> <img
							src="light/img/email.png">
						</a><br> <span>寄連結給好友</span>
					</div>

					<div class="pic">
					<a class="a2a_button_facebook" target="_blank">
						<img src="light/img/fb.png"><br> <span>分享到臉書</span>
						</a>
						<script type="text/javascript"
							src="http://static.addtoany.com/menu/page.js"></script>
					</div>
					<div>
						<input type="text" class="hrefCopy" id="site" value="" readonly>
						<input type="button" id="copy-button" value="copy" class="btn" data-clipboard-target="site">
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	
<!-- 登入頁面 -->
	<div id="login" class="reveal-modal">
		<header class="reveal-modal-header">
			<p style="text-align: center;">
				<strong style="font-size: 28px;">登入</strong>
				<img class="pop_logo" alt="pop_logo" src="images/pop_logo.png">
			</p>
		</header>
		<div class="cont clearfix">
			<form style="text-align: center;" id="loginForm" method="post" action="checkLogin"> 
				<label><input type="text" placeholder="請輸入帳號" class="textbox account" name="account"></label><br>
				<label><input type="password" placeholder="請輸入密碼" class="textbox key" name="password"></label><br>
				<a href="forgetPassword" style="padding-left: 70px;margin-top: 10px;display: inline-block;">忘記密碼</a>
				<a href="register">成為會員</a><br>
				<button class="btn_login">登入</button>
			</form>
		</div>
	</div>


	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<!-- validate -->
	<script src="js/jquery.validate.js"></script>
	<script src="js/messages_zh_TW.js"></script>
	<!-- some jquery method we use -->
	<script src="light/js/bg.js"></script>
	<script src="light/js/jquery.bpopup.min.js"></script>
	<!-- copy method  -->
	<script src="light/js/ZeroClipboard.js"></script>
	<script src="light/js/main.js"></script>
	<!-- sweet alert  -->
	<script src="light/js/sweet-alert.min.js"></script>
	<!-- alert  -->
	<script src="light/js/jquery.growl.js" type="text/javascript"></script>
	<!-- Reveal Modal -->
	<script type="text/javascript" src="js/jquery.reveal.js"></script>	
	<script>
		function show(obj, item) {
			//判斷CheckBox是否被勾選 若是則顯示區塊 反之則隱藏
			document.getElementById(item).style.display = obj.checked ? "block"
					: "none";
		};
		function words_deal() {
			 var curLength = $("#TextArea").val().length;
			 if (curLength > 150) {
				 var num = $("#TextArea").val().substr(0, 150);
				 $("#TextArea").val(num);
				 $.growl.error({ message: "最多輸入150字歐~已超過字數限制~顆顆" });
			 }
		}
		
		$(document).ready(function() {
			//依id讓某一個天燈亮
			var url = location.search;
			var id = 0;
			if(url != ""){ //網址有傳值
				url = url.split("=");
				id = url[1];
				$('figure[id='+id+']').addClass('light');
				$('.change').bind('DOMSubtreeModified', function() {
					$('figure[id='+url[1]+']').addClass('light'); 
					//判斷卡片狀態
					$('.img').on("click",function() {
						var id=this.id;
						$.ajax({
							type:"post",
							url : "checkLightStatus",
							data :{id:id},
							success:function(html){
								var loadUrl=html;
								$('#view').bPopup({
							        content:'iframe',
							        contentContainer:'#view',
							        position : [ 400, 150 ],
							        loadUrl:loadUrl
							    });   
							}
							
						});
						
					});
			    });
			}
			
			//每10秒飄出下一批天燈
			var change = true;
			var total = ${total};
			var now = 10;//現在飄了幾個
			setInterval(function(){
				$.ajax({
					type : "post",
					dataType: 'json',
					url : "showNextLight",
					data : {now:now,id:id},
					success : function(result) {
						var w = [];
						var h = [];
						var light = [];
						var string = "";
						for (var i in result){
							w[i] = Math.floor((Math.random() * 50) + 100);
							h[i] = new Number(w[i])+20;
							string += "<figure class='"+result[i].floatPath+"' style='left: "+ Math.random() * 90 +"%; width: "+ w[i] +"px; height:"+ h[i] +"px;'  id='"+result[i].id+"'>" +
							"<img class='img' src='"+result[i].imagePath +"' style='width: 100%; height: 100%;' id='"+result[i].id+"'></figure>";
						}
						
						if(now+10>total){
							now=10-(total-now);
						}else{
							if(id==0){
								now+=result.length;
							}else{
								now+=result.length-1;
							}			
						}
						
						
						if(change == true){
							document.getElementById("change2").innerHTML = string;
							change = false;
						}else if(change == false){
							document.getElementById("change1").innerHTML = string;
							change = true;
						}
						
						//判斷卡片狀態
						$('.img').on("click",function() {
							var id=this.id;
							$.ajax({
								type:"post",
								url : "checkLightStatus",
								data :{id:id},
								success:function(html){
									var loadUrl=html;
									$('#view').bPopup({
								        content:'iframe',
								        contentContainer:'#view',
								        position : [ 400, 150 ],
								        loadUrl:loadUrl
								    });   
								}
								
							});
							
						});
					},
					error : function() {
						alert('Error while request..');
					}
				});
			},8000); //每10秒執行一次function()
			
		});

		$(function() {
			$("#loginForm").validate({
				rules:{
					account:"required",
					password:"required"
				}
			});
			
			$("#sendForm").validate({
				rules : {
					receiver : "required",
					sender : "required",
					content : "required",
					question : "required",
					answer : "required"
				},
				submitHandler : function() {
					$.ajax({
						type : "post",
						url : "addLight",
						data : $("#sendForm").serialize(),
						success : function(id) {
							$('#addCard').bPopup().close();
							$('#site').val("http://localhost:8080/Proactive/lantern?id="+ id);
							$('#sharePage').bPopup(
									{
										position : [375,100 ],
										opacity : 0.6,
										positionStyle : 'fixed', //'fixed' or 'absolute'
										onClose : function() {
											window.location.assign("http://localhost:8080/Proactive/lantern?id="+ id);
														}
													});
							$('.a2a_button_facebook').click (function() {
//									window.open("http://www.facebook.com/share.php?u=".concat(encodeURIComponent('http://localhost:8080/Proactive/lantern?id='+ id)));
								window.open("http://www.facebook.com/share.php?u=http://localhost:8080/Proactive/lantern?id"+ id);
							});
								},

								error : function() {
									alert('Error while request..');
								}
							});

				}
			});
			
			//飄出天燈與製作天燈替換	
			$('#after').click(function() {
				$('.before').fadeOut(500);
				$('.after').fadeIn(500);
			});
			$('#before').click(function() {
				$('.after').fadeOut(500);
				$('.before').fadeIn(500);
			});
			
			//彈出卡片流程
			$('#process').click(function() {
				 $('#image').bPopup({
					 opacity : 0.6,
					 position : [ 425, 150 ],
					 positionStyle : 'fixed' //'fixed' or 'absolute'
			        });
			});
			//點指定卡片彈出卡片敘述
			$('.lantern_example').click(function() {
				if ($(this).attr("id") == 1) {
					$('#newLove').bPopup({
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
				if ($(this).attr("id") == 2) {
					$('#newBusiness').bPopup({
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
				if ($(this).attr("id") == 3) {
					$('#newHealth').bPopup({
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
				if ($(this).attr("id") == 4) {
					$('#newAcademic').bPopup({
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
				if ($(this).attr("id") == 5) {
					$('#newPeace').bPopup({
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
				if ($(this).attr("id") == 6) {
					$('#newSpecial').bPopup({
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
			});
			//判斷是否登入
			$('.clickLogin').click(function() {
				if ($(this).attr("id") == 1) {
					$('#newLove').bPopup().close();
				}
				if ($(this).attr("id") == 2) {
					$('#newBusiness').bPopup().close();
				}
				if ($(this).attr("id") == 3) {
					$('#newHealth').bPopup().close();
				}
				if ($(this).attr("id") == 4) {
					$('#newAcademic').bPopup().close();
				}
				if ($(this).attr("id") == 5) {
					$('#newPeace').bPopup().close();
				}
				if ($(this).attr("id") == 6) {
					$('#newSpecial').bPopup().close();
				}
				
			});
			//點指定卡片彈出卡片製作
			$('.clickCard').click(function() {
				$('#tid').val(this.id);
				if ($(this).attr("id") == 1) {
					$('#newLove').bPopup().close();
					$('#addCard').bPopup({
						position : [ 390, 50 ],
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});

				}
				if ($(this).attr("id") == 2) {
					$('#newBusiness').bPopup().close();
					$('#addCard').bPopup({
						position : [ 390, 100 ],
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});

				}
				if ($(this).attr("id") == 3) {
					$('#newHealth').bPopup().close();
					$('#addCard').bPopup({
						position : [ 390, 50 ],
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
				if ($(this).attr("id") == 4) {
					$('#newAcademic').bPopup().close();
					$('#addCard').bPopup({
						position : [ 390, 50 ],
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
				if ($(this).attr("id") == 5) {
					$('#newPeace').bPopup().close();
					$('#addCard').bPopup({
						position : [ 390, 50 ],
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}
				if ($(this).attr("id") == 6) {
					$('#newSpecial').bPopup().close();
					$('#addCard').bPopup({
						position : [ 390, 50 ],
						// modalClose: false,
						opacity : 0.6,
						positionStyle : 'fixed' //'fixed' or 'absolute'
					});
				}

			});
			$('.clickCard')
					.click(
							function() {
								$('#part1')
										.removeClass(
												'lovecard businesscard healthcard academiccard peacecard specialcard ');
								$('#part2')
										.removeClass(
												'lcard_btn bcard_btn hcard_btn acard_btn pcard_btn scard_btn');
								if ($(this).attr("id") == 1) {
									$('#part1').addClass('lovecard');
									$('#part2').addClass('lcard_btn');
								}

								if ($(this).attr("id") == 2) {
									$('#part1').addClass('businesscard');
									$('#part2').addClass('bcard_btn');
								}
								if ($(this).attr("id") == 3) {
									$('#part1').addClass('healthcard');
									$('#part2').addClass('hcard_btn');
								}
								if ($(this).attr("id") == 4) {
									$('#part1').addClass('academiccard');
									$('#part2').addClass('acard_btn');
								}
								if ($(this).attr("id") == 5) {
									$('#part1').addClass('peacecard');
									$('#part2').addClass('pcard_btn');
								}
								if ($(this).attr("id") == 6) {
									$('#part1').addClass('specialcard');
									$('#part2').addClass('scard_btn');
								}
							});
			//sweet-alert
			$('#copy-button').click(function() {
				swal({
					title : "已複製!",
					//text : "I will close in 2 seconds.",
					timer : 1000
				});
			});
			
			//判斷卡片狀態
			$('.img').on("click",function() {
				var id=this.id;
				$.ajax({
					type:"post",
					url : "checkLightStatus",
					data :{id:id},
					success:function(html){
						var loadUrl=html;
						$('#view').bPopup({
					        content:'iframe',
					        contentContainer:'#view',
					        position : [ 400, 150 ],
					        loadUrl:loadUrl
					    });   
					}
					
				});
				
			});

		});
	</script>
</body>
</html>